<template>
    <div class="userEdit">
        <Header title="账号管理"></Header>
        <div class="input-item">
            <van-field v-model="nickName"  label="昵称" placeholder="请输入昵称" />
            <van-field v-model="introduceSing" label="个性签名" placeholder="请输入签名" />
            <van-field v-model="password" label="密码" type="password" placeholder="请输入密码" />
        </div>
        <van-button round block type="primary"  color="#ffc400" class="save-btn" @click="save">
           保存
        </van-button> <van-button round block type="primary" class="save-btn" @click="logout" color="#ffc400">
            退出登录
        </van-button>

    </div>
</template>
<script>
import { defineComponent } from 'vue';
import { reactive,toRefs } from 'vue';
import { showToast } from 'vant';
import { useRouter } from 'vue-router';
import Header from "../../components/Store_header.vue"
export default defineComponent({
    name: 'App',
    components:{
        Header
    },
    setup(){
        const router = useRouter();
        let data = reactive({
            nickName:"",
            password:"",
            introduceSing:"6666666666666"
        });
        const logout = (type)=>{
            localStorage.removeItem("isLogin");
            showToast(type==='edit'? "账号修改成功，请重新登录":"成功退出登录")
            router.push("/login")
        }
        // 保存
        const save = ()=>{
            if(data.nickName && data.password){
                const userInfo = JSON.parse(localStorage.userInfo);
                const newUserInfo = {
                    "用户名":userInfo["用户名"],
                    "密码":data.password,
                    "昵称":data.nickName
                }
                localStorage.setItem("userInfo",JSON.stringify(newUserInfo));
                showToast("修改成功");
                // 退出登录，重新登录新的账号和密码
                logout('edit')
            }else{
                showToast("请输入修改的内容")
            }
        }
        return{
            ...toRefs(data),
            save,
            logout
        }
    }

})
</script>

<style lang="less" scoped>
.van-button {
    background-color: #ffc400;
    border-color: #ffc400;
}
.save-btn{
    width: 80%;
    margin: 20px auto;
}
    
</style>